<template>
  <div class="login-container">
    <!-- 左侧宣传区域 -->
    <div class="login-banner">
      <div class="banner-content">
        <h1>家庭物品管理系统</h1>
        <p>高效管理家庭物品，轻松追踪物品位置，让生活更有条理</p>
        
        <div class="banner-features">
          <div class="feature-item">
            <i class="el-icon">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z" />
              </svg>
            </i>
            <div class="feature-text">
              <h3>智能分类</h3>
              <p>对物品进行分类管理，依据类别、位置等多维度进行智能归纳，查找物品一目了然</p>
            </div>
          </div>
          <div class="feature-item">
            <i class="el-icon">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm67.744 256.128-67.744 12.8-67.744-12.8a64 64 0 1 0-128 0v448a64 64 0 0 0 64 64h267.488a64 64 0 0 0 64-64v-448a64 64 0 0 0-128 0h-4zM256 832h512v-448H256v448zm256-512c22.336 0 40.96-18.048 40.96-40.96s-18.624-40.96-40.96-40.96-40.96 18.048-40.96 40.96 18.624 40.96 40.96 40.96z" />
              </svg>
            </i>
            <div class="feature-text">
              <h3>库存追踪</h3>
              <p>实时监控家庭物品库存情况，过期提醒、数量预警，不再为物品短缺或过期而烦恼</p>
            </div>
          </div>
          <div class="feature-item">
            <i class="el-icon">
              <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                <path fill="currentColor" d="M288 896h448q32 0 32 32t-32 32H288q-32 0-32-32t32-32z" />
                <path fill="currentColor" d="M800 416a288 288 0 1 0-576 0c0 118.144 94.528 272.128 288 456.576C705.472 688.128 800 534.144 800 416zM512 960C277.312 746.688 160 565.312 160 416a352 352 0 0 1 704 0c0 149.312-117.312 330.688-352 544z" />
                <path fill="currentColor" d="M544 384h96a32 32 0 1 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96v-96a32 32 0 0 1 64 0v96z" />
              </svg>
            </i>
            <div class="feature-text">
              <h3>数据统计</h3>
              <p>通过图表可视化展示物品分布情况，直观了解家庭物品结构，辅助做出优化决策</p>
            </div>
          </div>
        </div>
        
        <div class="action-prompt">
          <h4>已有数千家庭加入我们</h4>
          <p>立即登录，开始您的家庭物品管理之旅</p>
        </div>
        
        <div class="banner-illustration"></div>
      </div>
    </div>
    
    <!-- 右侧表单区域 -->
    <div class="login-content">
      <div class="forms-container">
        <!-- 登录表单 -->
        <div class="login-box" :class="{ 'slide-out': isRegisterMode || isForgotMode }">
          <div class="login-header">
            <div class="logo">
              <i class="el-icon">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M192 413.952V896h640V413.952L512 147.328 192 413.952zM139.52 374.4l352-293.312a32 32 0 0 1 40.96 0l352 293.312A32 32 0 0 1 896 398.976V928a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V398.976a32 32 0 0 1 11.52-24.576z" />
                </svg>
              </i>
            </div>
            <h2>欢迎回来</h2>
            <p class="subtitle">登录您的账号</p>
          </div>
          
          <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-position="top" class="login-form">
            <el-form-item prop="username">
              <el-input 
                v-model="loginForm.username" 
                placeholder="请输入用户名" 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur"
              >
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input 
                v-model="loginForm.password" 
                type="password" 
                placeholder="请输入密码" 
                show-password 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur"
              >
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32H224zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96z" />
                      <path fill="currentColor" d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32zm192-160v-64a192 192 0 1 0-384 0v64h384zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <div class="form-actions">
              <el-checkbox v-model="rememberMe" class="custom-checkbox">记住我</el-checkbox>
              <el-link type="primary" class="forgot-link" @click="toggleForgot">忘记密码？</el-link>
            </div>
            
            <el-button 
              type="primary" 
              :loading="loading" 
              class="submit-btn" 
              @click="handleLogin"
              @mouseenter="btnHoverStart"
              @mouseleave="btnHoverEnd"
            >
              {{ loading ? '登录中...' : '登 录' }}
            </el-button>
            
            <div class="register-link">
              还没有账号？
              <el-link type="primary" @click="toggleForm" class="register-btn">立即注册</el-link>
            </div>
          </el-form>
        </div>
        
        <!-- 注册表单 -->
        <div class="register-box" :class="{ 'slide-in': isRegisterMode }">
          <div class="login-header">
            <div class="logo">
              <i class="el-icon">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z" />
                </svg>
              </i>
            </div>
            <h2>用户注册</h2>
            <p class="subtitle">创建您的账号</p>
          </div>
          
          <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" label-position="top" class="login-form">
            <el-form-item prop="username">
              <el-input 
                v-model="registerForm.username" 
                placeholder="请输入用户名" 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur"
              >
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M288 320a224 224 0 1 0 448 0 224 224 0 1 0-448 0zm544 608H160a32 32 0 0 1-32-32v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 0 1-32 32z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="name">
              <el-input 
                v-model="registerForm.name" 
                placeholder="请输入姓名" 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur"
              >
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0 208 208 0 0 1 416 0z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="email">
              <el-input 
                v-model="registerForm.email" 
                placeholder="请输入邮箱" 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur"
              >
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M128 224v512a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V224H128zm0-64h768a64 64 0 0 1 64 64v512a128 128 0 0 1-128 128H192A128 128 0 0 1 64 736V224a64 64 0 0 1 64-64z" />
                      <path fill="currentColor" d="M904 224 656.128 506.368 960 960H64l303.872-453.632L128 224h776zM352 623.296 704 960H256l96-336.704zM591.36 496.064 512 402.88l-79.36 93.184-308.352 460.48L229.76 960h566.4l105.472-3.456L591.36 496.064z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="password">
              <el-input 
                v-model="registerForm.password" 
                type="password" 
                placeholder="请输入密码" 
                show-password 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur"
              >
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32H224zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96z" />
                      <path fill="currentColor" d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32zm192-160v-64a192 192 0 1 0-384 0v64h384zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="confirmPassword">
              <el-input 
                v-model="registerForm.confirmPassword" 
                type="password" 
                placeholder="请确认密码" 
                show-password 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur"
              >
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32H224zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96z" />
                      <path fill="currentColor" d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32zm192-160v-64a192 192 0 1 0-384 0v64h384zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-button 
              type="primary" 
              :loading="registerLoading" 
              class="submit-btn" 
              @click="handleRegister"
              @mouseenter="btnHoverStart"
              @mouseleave="btnHoverEnd"
            >
              {{ registerLoading ? '注册中...' : '注 册' }}
            </el-button>
            
            <div class="register-link">
              已有账号？
              <el-link type="primary" @click="toggleForm" class="login-btn">立即登录</el-link>
            </div>
          </el-form>
        </div>

        <!-- 忘记密码表单 -->
        <div class="forgot-box" :class="{ 'slide-in': isForgotMode }">
          <div class="login-header">
            <div class="logo">
              <i class="el-icon">
                <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                  <path fill="currentColor" d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM512 696c22.1 0 40-17.9 40-40s-17.9-40-40-40-40 17.9-40 40 17.9 40 40 40z" />
                </svg>
              </i>
            </div>
            <h2>找回密码</h2>
            <p class="subtitle">重置您的账号密码</p>
          </div>
          
          <el-form ref="forgotFormRef" :model="forgotForm" :rules="forgotRules" label-position="top" class="login-form">
            <el-form-item prop="email">
              <el-input v-model="forgotForm.email" placeholder="请输入注册邮箱" class="custom-input"
                @focus="handleInputFocus" @blur="handleInputBlur">
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M128 224v512a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64V224H128zm0-64h768a64 64 0 0 1 64 64v512a128 128 0 0 1-128 128H192A128 128 0 0 1 64 736V224a64 64 0 0 1 64-64z" />
                      <path fill="currentColor" d="M904 224 656.128 506.368 960 960H64l303.872-453.632L128 224h776zM352 623.296 704 960H256l96-336.704zM591.36 496.064 512 402.88l-79.36 93.184-308.352 460.48L229.76 960h566.4l105.472-3.456L591.36 496.064z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item prop="captcha" class="captcha-container">
              <el-input v-model="forgotForm.captcha" placeholder="请输入验证码"
                class="captcha-input custom-input" @focus="handleInputFocus" @blur="handleInputBlur">
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M384 96a64 64 0 0 1 64-64h192a64 64 0 0 1 64 64v704h42a64 64 0 0 1 64 64v96a64 64 0 0 1-64 64H278a64 64 0 0 1-64-64v-96a64 64 0 0 1 64-64h42V96zm64 64v704h128V160H448zm-64 800a32 32 0 1 0 0-64 32 32 0 0 0 0 64zm192-64a32 32 0 1 1 64 0 32 32 0 0 1-64 0z" />
                    </svg>
                  </i>
                </template>
              </el-input>
              <el-button class="captcha-btn" :disabled="captchaTimer > 0" @click="sendCaptcha">
                {{ captchaTimer > 0 ? `${captchaTimer}s后重新发送` : '获取验证码' }}
              </el-button>
            </el-form-item>
            
            <el-form-item prop="newPassword">
              <el-input 
                v-model="forgotForm.newPassword" 
                type="password" 
                placeholder="请输入新密码" 
                show-password 
                class="custom-input" 
                @focus="handleInputFocus" 
                @blur="handleInputBlur">
                <template #prefix>
                  <i class="el-icon">
                    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M224 448a32 32 0 0 0-32 32v384a32 32 0 0 0 32 32h576a32 32 0 0 0 32-32V480a32 32 0 0 0-32-32H224zm0-64h576a96 96 0 0 1 96 96v384a96 96 0 0 1-96 96H224a96 96 0 0 1-96-96V480a96 96 0 0 1 96-96z" />
                      <path fill="currentColor" d="M512 544a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V576a32 32 0 0 1 32-32zm192-160v-64a192 192 0 1 0-384 0v64h384zM512 64a256 256 0 0 1 256 256v128H256V320A256 256 0 0 1 512 64z" />
                    </svg>
                  </i>
                </template>
              </el-input>
            </el-form-item>
            
            <el-button type="primary" :loading="forgotLoading" class="submit-btn"
              @click="handleForgotPassword" @mouseenter="btnHoverStart" @mouseleave="btnHoverEnd">
              {{ forgotLoading ? '提交中...' : '重置密码' }}
            </el-button>
            
            <div class="register-link">
              想起密码了？
              <el-link type="primary" @click="backToLogin" class="login-btn">返回登录</el-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { useUserStore } from '../../stores/user'
import { usersApi } from '../../utils/apiService'
import message from '../../utils/message'

const router = useRouter()
const userStore = useUserStore()
const loading = ref(false)
const registerLoading = ref(false)
const forgotLoading = ref(false)
const rememberMe = ref(false)
const isRegisterMode = ref(false)
const isForgotMode = ref(false)
const activeInput = ref('')
const captchaTimer = ref(0)
let captchaInterval: any = null

// 表单引用
const loginFormRef = ref(null)
const registerFormRef = ref(null)
const forgotFormRef = ref(null)

// 登录表单
const loginForm = reactive({
  username: '',
  password: ''
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ]
}

// 注册表单
const registerForm = reactive({
  username: '',
  name: '',
  email: '',
  password: '',
  confirmPassword: ''
})

// 密码确认验证
const validateConfirmPassword = (rule: any, value: string, callback: any) => {
  if (value !== registerForm.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const registerRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在3到20个字符之间', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

// 忘记密码表单
const forgotForm = reactive({
  email: '',
  captcha: '',
  newPassword: ''
})

const forgotRules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '验证码长度为6位', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6个字符', trigger: 'blur' }
  ]
}

// 输入框焦点处理
const handleInputFocus = (event: any) => {
  const inputEl = event.target.closest('.el-input');
  if (inputEl) {
    inputEl.classList.add('input-focus-animate');
    activeInput.value = event.target.name;
  }
}

const handleInputBlur = (event: any) => {
  const inputEl = event.target.closest('.el-input');
  if (inputEl) {
    inputEl.classList.remove('input-focus-animate');
    activeInput.value = '';
  }
}

// 按钮悬停效果
const btnHoverStart = () => {
  document.querySelector('.submit-btn')?.classList.add('btn-hover');
}

const btnHoverEnd = () => {
  document.querySelector('.submit-btn')?.classList.remove('btn-hover');
}

// 切换登录/注册表单
const toggleForm = () => {
  isRegisterMode.value = !isRegisterMode.value;
  isForgotMode.value = false;
}

// 切换到忘记密码表单
const toggleForgot = () => {
  console.log('toggleForgot被调用'); // 添加调试信息
  isForgotMode.value = true;
  isRegisterMode.value = false;
}

// 返回登录表单
const backToLogin = () => {
  isForgotMode.value = false;
  isRegisterMode.value = false;
}

// 发送验证码
const sendCaptcha = async () => {
  // 验证邮箱格式
  if (!forgotForm.email) {
    message.warning('请先输入邮箱地址')
    return
  }

  // 邮箱格式验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(forgotForm.email)) {
    message.warning('请输入正确的邮箱格式')
    return
  }

  try {
    // 向后端发送获取验证码请求
    await usersApi.sendCaptcha(forgotForm.email)
    message.success('验证码已发送，请查收邮件')

    // 开始倒计时
    captchaTimer.value = 60
    captchaInterval = setInterval(() => {
      captchaTimer.value--
      if (captchaTimer.value <= 0) {
        clearInterval(captchaInterval)
      }
    }, 1000)
  } catch (error) {
    console.error('发送验证码错误:', error)
    if (error.message && error.message.includes('Network Error')) {
      message.error('无法连接到服务器，请检查网络连接或稍后重试')
    } else if (error.response) {
      switch(error.response.status) {
        case 404:
          message.error('该邮箱未注册')
          break
        case 429:
          message.error('发送过于频繁，请稍后再试')
          break
        default:
          message.error('验证码发送失败，请稍后重试')
      }
    } else {
      message.error('验证码发送失败，请稍后重试')
    }
  }
}

// 处理忘记密码
const handleForgotPassword = async () => {
  forgotLoading.value = true
  try {
    // 验证表单
    const valid = await new Promise((resolve) => {
      if (!forgotFormRef.value) {
        resolve(false)
        return
      }
      forgotFormRef.value.validate((valid) => {
        resolve(valid)
      })
    })

    if (!valid) {
      message.warning('请正确填写所有必填字段')
      forgotLoading.value = false
      return
    }

    // 调用后端重置密码接口
    await usersApi.resetPassword({
      email: forgotForm.email,
      captcha: forgotForm.captcha,
      newPassword: forgotForm.newPassword
    })
    
    message.success('密码重置成功，请使用新密码登录')
    backToLogin() // 返回登录页
  } catch (error) {
    console.error('重置密码错误:', error)
    if (error.message && error.message.includes('Network Error')) {
      message.error('无法连接到服务器，请检查网络连接或稍后重试')
    } else if (error.response) {
      switch(error.response.status) {
        case 400:
          message.error('验证码无效或已过期')
          break
        case 404:
          message.error('该邮箱未注册')
          break
        default:
          message.error('密码重置失败，请稍后重试')
      }
    } else {
      message.error('密码重置失败，请稍后重试')
    }
  } finally {
    forgotLoading.value = false
  }
}

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  if (captchaInterval) {
    clearInterval(captchaInterval);
  }
});

// 处理登录
const handleLogin = async () => {
  loading.value = true
  try {
    // 验证表单
    const valid = await new Promise((resolve) => {
      if (!loginFormRef.value) {
        resolve(false)
        return
      }
      loginFormRef.value.validate((valid) => {
        resolve(valid)
      })
    })

    if (!valid) {
      message.warning('请正确填写所有必填字段')
      loading.value = false
      return
    }

    // 调用 store action 并检查返回值
    const loginSuccessful = await userStore.login(loginForm.username, loginForm.password)
    
    if (loginSuccessful) {
      message.success('登录成功')
      router.push('/dashboard')
    } else {
      // 这个分支理论上不应该被执行，因为错误会被catch捕获
      // 但为了代码健壮性保留，以防store action未按预期抛出错误
      message.error('发生未知错误，登录失败') 
    }

  } catch (error) {
    console.error('登录错误:', error)
    // 区分不同类型的错误
    if (error.message && error.message.includes('Network Error')) {
      message.error('无法连接到服务器，请检查网络连接或稍后重试')
    } else if (error.response) {
      // 有响应但状态码错误
      switch(error.response.status) {
        case 401:
          message.error('用户名或密码错误')
          break
        case 403:
          message.error('账号已被禁用，请联系管理员')
          break
        case 500:
          message.error('服务器内部错误，请稍后重试')
          break
        default:
          message.error(`服务器响应错误 (${error.response.status})，请稍后重试`)
      }
    } else {
      // 其他 JavaScript 错误或未预料的错误
      message.error('登录失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 处理注册
const handleRegister = async () => {
  registerLoading.value = true
  try {
    // 验证表单
    const valid = await new Promise((resolve) => {
      if (!registerFormRef.value) {
        resolve(false)
        return
      }
      registerFormRef.value.validate((valid) => {
        resolve(valid)
      })
    })

    if (!valid) {
      message.warning('请正确填写所有必填字段')
      registerLoading.value = false
      return
    }

    const userData = {
      username: registerForm.username,
      name: registerForm.name,
      email: registerForm.email,
      password: registerForm.password,
      confirmPassword: registerForm.confirmPassword
    }
    
    await userStore.register(userData)
    message.success('注册成功，请登录')
      isRegisterMode.value = false // 切换回登录面板
  } catch (error) {
    console.error('注册错误:', error)
    if (error.message && error.message.includes('Network Error')) {
      message.error('无法连接到服务器，请检查网络连接或稍后重试')
    } else if (error.response) {
      switch(error.response.status) {
        case 409:
          message.error('用户名或邮箱已被注册')
          break
        case 400:
          message.error('提交的数据有误，请检查输入')
          break
        case 500:
          message.error('服务器内部错误，请稍后重试')
          break
        default:
          message.error(`注册失败 (${error.response.status})，请稍后重试`)
      }
    } else {
      message.error('注册失败，请稍后重试')
    }
  } finally {
    registerLoading.value = false
  }
}
</script>

<style scoped>
/* 全局容器 */
.login-container {
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  display: flex;
  background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

/* 背景渐变动画 */
.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(10, 132, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 122, 255, 0.1) 0%, transparent 50%);
  animation: gradientMove 15s ease infinite;
  z-index: 1;
}

@keyframes gradientMove {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* 左侧宣传区 */
.login-banner {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(135deg, #0A2647 0%, #144272 100%);
}

.login-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.2;
  z-index: -1;
}

.banner-content {
  width: 100%;
  max-width: 600px;
  color: #fff;
  text-align: center;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-content h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(to right, #fff, #5AC8FA);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.5px;
  animation: slideInDown 1s ease-out;
  text-shadow: 0 0 30px rgba(90, 200, 250, 0.3);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  line-height: 1.5;
  animation: slideInUp 1s ease-out;
  animation-delay: 0.2s;
  animation-fill-mode: both;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.banner-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  text-align: left;
  margin-top: 1.5rem;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  opacity: 0;
  animation: fadeInLeft 0.8s ease-out forwards;
}

.feature-item:nth-child(1) {
  animation-delay: 0.3s;
}

.feature-item:nth-child(2) {
  animation-delay: 0.6s;
}

.feature-item:nth-child(3) {
  animation-delay: 0.9s;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.feature-item i {
  font-size: 1.5rem;
  color: #007AFF;
  background: rgba(0, 122, 255, 0.1);
  padding: 0.6rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.feature-item:hover i {
  transform: scale(1.1) rotate(5deg);
  background: rgba(0, 122, 255, 0.2);
}

.feature-text h3 {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.feature-text p {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
  animation: none;
  line-height: 1.4;
}

.action-prompt {
  margin-top: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: pulse 2s infinite ease-in-out;
  animation-delay: 1.5s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 122, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 122, 255, 0);
  }
}

.action-prompt h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #007AFF;
}

.action-prompt p {
  font-size: 1rem;
  margin: 0;
  animation: none;
}

.banner-illustration {
  position: absolute;
  bottom: -50px;
  right: -100px;
  width: 600px;
  height: 600px;
  opacity: 0.1;
  background: radial-gradient(circle, rgba(0, 122, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: float 10s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* 右侧表单区域 */
.login-content {
  flex: 0 0 50%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
  animation: slideInRight 1s ease-out;
  background: linear-gradient(135deg, #0A2647 0%, #144272 100%);
  padding: 40px 30px;
  position: relative;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 修复登录框位置 */
.forms-container {
  width: 100%;
  max-width: 450px;
  min-height: 560px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  perspective: 1000px;
  transform: scale(1.3);
  transform-origin: center center;
  margin-top: -140px; /* 向上移动表单容器 */
}

/* 修复登录框和注册框样式 */
.login-box,
.register-box,
.forgot-box {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.login-box {
  transform: rotateY(0deg);
  z-index: 2;
  margin-top: 80px; /* 登录表单下移，从140px改为80px */
}

.register-box {
  transform: rotateY(180deg);
  z-index: 1;
}

.login-box.slide-out {
  transform: rotateY(-180deg);
  z-index: 1;
  margin-top: 80px; /* 保持下移状态，从140px改为80px */
}

.register-box.slide-in {
  transform: rotateY(0deg);
  z-index: 2;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
  background: linear-gradient(145deg, #0A84FF, #007AFF);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 20px rgba(10, 132, 255, 0.2);
  transition: all 0.3s ease;
}

.logo:hover {
  transform: rotate(5deg) scale(1.05);
}

.logo .el-icon,
.logo i {
  font-size: 32px;
  color: white;
}

.login-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
}

.subtitle {
  color: #64748b;
  font-size: 15px;
}

.login-form {
  margin-top: 20px;
}

.custom-input :deep(.el-input__wrapper) {
  background: #f8fafc;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 0 15px;
  transition: all 0.3s ease;
  box-shadow: none;
}

.custom-input :deep(.el-input__wrapper:hover) {
  background: #fff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  background: #fff;
  border-color: #007AFF;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
  transform: translateY(-2px);
}

.custom-input :deep(.el-input__inner) {
  height: 42px;
  font-size: 15px;
  color: #1e293b;
}

.custom-input :deep(.el-input__prefix-inner) {
  font-size: 18px;
  color: #94a3b8;
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__wrapper.is-focus .el-input__prefix-inner) {
  color: #007AFF;
  transform: scale(1.1);
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}

.custom-checkbox {
  --el-checkbox-font-size: 14px;
  --el-checkbox-input-border-color: #e2e8f0;
}

.forgot-link {
  font-size: 14px;
  font-weight: 500;
  color: #007AFF;
  transition: all 0.3s ease;
}

.forgot-link:hover {
  color: #0A84FF;
  text-shadow: 0 0 8px rgba(0, 122, 255, 0.3);
}

.submit-btn {
  width: 100%;
  height: 46px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 16px;
  background: linear-gradient(135deg, #0A84FF, #007AFF);
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.submit-btn:hover::before {
  left: 100%;
}

.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 122, 255, 0.3);
}

.submit-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 5px 10px rgba(0, 122, 255, 0.2);
}

.btn-hover {
  animation: pulse-btn 0.6s ease-in-out;
}

@keyframes pulse-btn {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

.register-link {
  text-align: center;
  color: #64748b;
  font-size: 14px;
  margin-top: 20px;
}

.register-btn, .login-btn {
  color: #007AFF;
  font-weight: 500;
  transition: all 0.3s ease;
}

.register-btn:hover, .login-btn:hover {
  color: #0A84FF;
  text-shadow: 0 0 8px rgba(0, 122, 255, 0.3);
}

.input-focus-animate {
  animation: pulse-input 1s ease infinite;
}

@keyframes pulse-input {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* 确保icon显示正确 */
.el-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.el-icon svg {
  height: 1em;
  width: 1em;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .login-container {
    flex-direction: column;
  }
  
  .login-banner {
    flex: 0 0 40%;
    padding: 20px;
  }
  
  .login-content {
    flex: 0 0 60%;
    padding: 20px 15px;
  }
  
  .login-box, .register-box {
    padding: 30px 20px;
  }
  
  .banner-content h1 {
    font-size: 2rem;
  }
  
  .banner-content p {
    font-size: 1rem;
  }
  
  .feature-text p {
    font-size: 0.8rem;
  }
  
  .logo {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  .login-banner {
    display: none;
  }
  
  .login-content {
    flex: 1;
  }
  
  .forms-container {
    max-width: 380px;
  }
}

/* 忘记密码表单 */
.forgot-box {
  width: 100%;
  height: auto;
  background: #ffffff;
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  z-index: 1;
  margin-top: 80px; /* 找回密码表单下移，从140px改为80px */
}

.forgot-box.slide-in {
  transform: rotateY(0deg);
  z-index: 2;
}

/* 验证码输入框和按钮容器 */
.captcha-container {
  position: relative;
}

.captcha-input {
  width: 100%;
}

.captcha-btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  height: 46px;
  padding: 0 15px;
  border: none;
  border-radius: 0 16px 16px 0;
  background: linear-gradient(135deg, #0A84FF, #007AFF);
  color: white;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
}

.captcha-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0070E8, #0058B8);
  box-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
}

.captcha-btn:disabled {
  background: linear-gradient(135deg, #9ca3af, #d1d5db);
  cursor: not-allowed;
}
</style> 